<template>
  <el-dialog
    v-model="dialogVisible"
    title="设置会员信息"
    width="600px"
    center
    @close="
      () => {
        pickVip = membershipList[0]?.id
        consultationFrequency = ''
        registrationsFrequency = ''
        expired = ''
      }
    "
  >
    <el-form v-if="isExprired">
      <el-form-item label="请选择会员">
        <el-radio-group v-model="pickVip">
          <el-radio v-for="item in membershipList" :key="item.id" :value="item.id">{{
            item.membershipName
          }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div v-else>
      <h4 class="mb-20px">当前会员权益</h4>
      <el-row class="mb-20px">
        <el-col :span="5">所属会员：</el-col>
        <el-col :span="19">{{ currentUser?.membershipName }}</el-col>
      </el-row>
      <el-row class="mb-20px">
        <el-col :span="5">剩余咨询次数：</el-col>
        <el-col :span="19"
          >{{ currentUser?.remainingConsultationFrequency || 0 }}/{{
            currentUser?.consultationsTotalNumber || 0
          }}次</el-col
        >
      </el-row>
      <el-row class="mb-20px">
        <el-col :span="5">剩余报名次数：</el-col>
        <el-col :span="19"
          >{{ currentUser?.remainingRegistrationsFrequency || 0 }}/{{
            currentUser?.registrationsTotalNumber || 0
          }}次</el-col
        >
      </el-row>
      <el-row class="mb-20px">
        <el-col :span="5">当前有效期：</el-col>
        <el-col :span="19">{{
          formatDate(currentUser?.memberPurchaseDate as Date) +
          '-' +
          formatDate(currentUser?.memberExpirationDate as Date)
        }}</el-col>
      </el-row>
      <h4 class="mb-20px">延长会员权益</h4>
      <el-form label-width="auto">
        <el-form-item label="咨询次数：">
          <el-input v-model="consultationFrequency" type="number" :min="1" :step="1">
            <template #suffix>次</template>
          </el-input>
        </el-form-item>
        <el-form-item label="报名次数：">
          <el-input v-model="registrationsFrequency" type="number" :min="1" :step="1">
            <template #suffix>次</template></el-input
          >
        </el-form-item>
        <el-form-item label="有效期：">
          <el-input v-model="expired" type="number" :min="1" :step="1">
            <template #suffix>天</template></el-input
          >
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submit" :loading="loading">确认</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { MembershipSettingsApi, MembershipSettings } from '@/api/biz/membershipsettings'
import { UserApi, User } from '@/api/biz/user'
import { formatDate } from '@/utils/formatTime'

const emits = defineEmits<{
  (e: 'ok'): void
}>()
const props = defineProps<{
  currentUser?: User
}>()
const dialogVisible = defineModel({ type: Boolean, default: false })

const message = useMessage()

// 会员过期
const isExprired = computed(() => {
  if (!props.currentUser?.memberExpirationDate) return true
  return +new Date(props.currentUser.memberExpirationDate as string) < +new Date()
})

const loading = ref(false)
const pickVip = ref()
const consultationFrequency = ref('')
const registrationsFrequency = ref('')
const expired = ref('')

const membershipList = ref<MembershipSettings[]>([])

MembershipSettingsApi.getMembershipSettingsPage({ pageNo: 1, pageSize: 100 }).then((data) => {
  membershipList.value = data.list
  pickVip.value = data.list[0]?.id
})

const submit = () => {
  if (isExprired.value) {
    loading.value = true
    UserApi.setMember({
      id: props.currentUser?.id as number,
      memberId: pickVip.value
    })
      .then(() => {
        message.success('设置成功')
        emits('ok')
        dialogVisible.value = false
      })
      .finally(() => {
        loading.value = false
      })
  } else {
    loading.value = true
    UserApi.setMemberRights({
      id: props.currentUser?.id as number,
      memberId: props.currentUser?.memberId as number,
      remainingConsultationFrequency: +consultationFrequency.value,
      remainingRegistrationsFrequency: +registrationsFrequency.value,
      periodValidity: +expired.value
    })
      .then(() => {
        message.success('设置成功')
        emits('ok')
        dialogVisible.value = false
      })
      .finally(() => {
        loading.value = false
      })
  }
}
</script>
